<template>
<div class="dashboard-container">
    <div class="container">
    <el-card class="box-card">
        <div class="title">
                <div class="titleInfo">
                    今日订单
                </div>
                <el-button type="text" class="button" @click="button()">
                        详细数据 >
                </el-button>
            </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="top">
            <el-tab-pane label="线下订单" name="first"> 
                <router-view />
                
            </el-tab-pane>
            <el-tab-pane label="小程序订单" name="second">
                <router-view />

            </el-tab-pane>
        </el-tabs>
        <template v-if="activeName == 'first'">
            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData"
                stripe
                v-if="tableData.length"
                class="tableBox"
                style="line-height: 40px;"
            >
                <el-table-column prop="number" label="订单号"  width="200px" show-overflow-tooltip/>
                <el-table-column prop="amount" label="订单金额">
                <template slot-scope="scope" >
                    {{ scope.row.amount }}￥
                </template>
                </el-table-column>
                <el-table-column prop="isVip" label="会员"  >
                <template slot-scope="scope" >
                    {{ scope.row.isVip === 0 ? '否' : '是' }}
                </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注"  width="260px" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                    {{ scope.row.reamrk == null ? '无' : scope.row.reamrk }}
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="订单状态">
                <template slot-scope="scope" >
                    <div
                    class="tableColumn-status"
                    :class="{ 'stop-use': String(scope.row.status) === '0' }"
                    >
                    {{ scope.row.status | formatStatus}}
                    </div>
                </template>
                </el-table-column>
                <el-table-column prop="orderTime" label="下单时间"  />
                <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    style="color: red;"
                    @click="refund(scope.row.id)"
                    >
                    退款
                    </el-button>
                    <el-button
                    type="text"
                    size="small"
                    class="non"
                    @click="orderDetail(scope.row,0)"
                    >
                    查看
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            <Empty v-else :is-search="isSearch" style="height: 320px;margin-top:-70px" />
            <el-pagination
                class="pageList"
                :page-sizes="[5,10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </template>
        <template v-else >

            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                :data="tableData2"
                stripe
                v-if="tableData2.length"
                class="tableBox"
                :lazy="true"
                style="line-height: 40px;"
            >
                <el-table-column prop="number" label="订单号"  width="150px" show-overflow-tooltip />
                <el-table-column prop="amount" label="订单金额">
                <template slot-scope="scope" >
                    {{ scope.row.amount + 6 }}￥
                </template>
                </el-table-column>
                <el-table-column prop="address" label="配送地址"  width="200px" show-overflow-tooltip />
                <el-table-column prop="phone" label="手机号"   show-overflow-tooltip />
                <el-table-column prop="isVip" label="会员"  >
                <template slot-scope="scope" >
                    {{ scope.row.isVip === 1 ? '是' : '否' }}
                </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注"   :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                    {{ scope.row.reamrk == null ? '无' : scope.row.reamrk }}
                    </div>
                </template>
                </el-table-column>
                <el-table-column label="订单状态">
                <template slot-scope="scope" >
                    <div
                    class="tableColumn-status"
                    :class="{ 'stop-use': String(scope.row.status) === '0' }"
                    >
                    {{ scope.row.status | formatStatus }}
                    </div>
                </template>
                </el-table-column>
                <!-- <el-table-column label="配送状态">
                <template slot-scope="scope" >
                    <div
                    class="tableColumn-status"
                    :class="{ 'stop-use': String(scope.row.deliveryStatus) === '0' }"
                    >
                    {{ String(scope.row.deliveryStatus) === '0' ? '未配送' : '已送达' }}
                    </div>
                </template>
                </el-table-column> -->
                <el-table-column prop="orderTime" label="下单时间" width="150" />
                <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                    <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    style="color: red;"
                    @click="cancel(scope.row.id)"
                    v-if="scope.row.status == 2"
                    >
                    拒单
                    </el-button>
                    <!-- 根据订单状态显示接单or派送 -->
                    <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    @click="confirm(scope.row.id)"
                    v-if="scope.row.status == 2"
                    >
                    接单
                    </el-button>
                    <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    @click="delivery(scope.row.id)"
                    v-if="scope.row.status == 3"
                    >
                    派送
                    </el-button>
                    <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    @click="complete(scope.row.id)"
                    v-if="scope.row.status == 4"
                    >
                    完成
                    </el-button>
                    <el-button
                    type="text"
                    size="small"
                    class="non"
                    @click="orderDetail(scope.row,1)"
                    >
                    查看
                    </el-button>
                </template>
                </el-table-column>
            </el-table>

            <Empty v-else :is-search="isSearch" style="height: 320px;margin-top:-70px" />
            <el-pagination
                class="pageList"
                :page-sizes="[5,10]"
                :page-size="pageSize2"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts2"
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
            />
        </template>

    </el-card>

    </div>
</div>
</template>

<script>
import {ordersEmployeePage,refund} from '@/api/orderEmployee'
import {conditionSearch,rejection,complete,delivery,confirm,cancel} from '@/api/order'
import Empty from '@/components/Empty/index.vue'
import {getTomorrow}  from '@/utils/formValidate'
export default {
components:{
    Empty
},
data() {
    return {
    page:1,
    pageSize:5,
    page2:1,
    pageSize2:5,
    activeName: 'first',
    loading: false,
    tableData:[],
    tableData2:[],
    input:'',
    isSearch:false,
    id:'',
    status:'',
    counts:0,
    counts2:0,
    initFun:'',
    beginTime:'',
    endTime:'',
    storeId:this.$store.state.user.userInfo.storeId,
    userId:'',
    rejectionReason:'',
    }
},
created(){
    const date = getTomorrow()
    this.beginTime = date[0]  +' 00:00:00'
    this.endTime = date[1]  +' 00:00:00'
    console.log(this.beginTime,this.endTime)
    this.init()
},
methods:{
    init(){
        this.getOfflineOrders()
    },


    handleSizeChange(val) {
        this.pageSize = val
        this.getOfflineOrders()
    },

    handleCurrentChange(val) {
        this.page = val
        this.getOfflineOrders()
    },
    handleSizeChange2(val) {
        this.pageSize2 = val
        this.getMiniProgramsOrders()
    },

    handleCurrentChange2(val) {
        this.page2 = val
        this.getMiniProgramsOrders()
    },
    orderDetail(row){
    console.log(row)
    //this.$route.query.id
    this.$router.push({
    path:'/home/orderDetail',
        query:{
            id:row.id
        }
    })
},
refund(id){
    this.$prompt('请输入退款理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        }).then(({ value }) => {
        this.rejectionReason = value
        let reson = {
            id: id,
            rejectionReason : value
        }
        refund(reson).then((res)=>{
            console.log(res)
            this.$message({
            type: 'success',
            message: '退款成功'
            });
            this.init()
        }).catch((err)=>{
            this.$message({
            type: 'info',
            message: err
            });   
        })

        }).catch(() => {
        this.$message({
            type: 'info',
            message: '取消退款'
        });       
        });
    },
    button(){
        this.$router.push('/home/statistic')
        this.$store.state.menu_active = 2
    },
    handleClick(tab, event) {
        console.log(tab.index, event);
        
        switch(tab.index){
          case '0':
            this.getOfflineOrders()
            break;
          case '1':
            this.getMiniProgramsOrders()
            break;
          default:
            this.$message('啥也没发生')
        }
      },
      getOfflineOrders(){
        this.storeId = this.storeId == 0? '' : this.storeId
        const res = ordersEmployeePage(this.beginTime,this.endTime,this.input,this.page,this.pageSize,this.status,this.storeId,'');
            res.then((res)=>{
                this.tableData = res.data.records
                this.counts = res.data.total
            }).catch((err)=>{
                console.log(err)
            })
      },
      getMiniProgramsOrders(){
        this.storeId = this.storeId == 0? '' : this.storeId
        conditionSearch(this.beginTime,this.endTime,this.input,this.page2,this.pageSize2,'',this.status,this.storeId,'').then((res)=>{
                this.tableData2 = res.data.records
                this.counts2 = res.data.total
            }).catch((err)=>{
                console.log(err)
            })
      },
      orderDetail(row,method){
            console.log(row)
            //this.$route.query.id
            this.$router.push({
            path:'/home/orderDetail',
                query:{
                    id:row.id,
                    method:method
                }
            })
        },
    cancel(id){
        this.$prompt('请输入拒单理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
            this.rejectionReason = value
            let reson = {
                id: id,
                cancelReason : value
            }
            cancel(reson).then((res)=>{
                console.log(res)
                this.$message({
                type: 'success',
                message: '拒单成功'
                });
                this.getMiniProgramsOrders()
            }).catch((err)=>{
                this.$message({
                type: 'info',
                message: err
                });   
            })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消退款'
            });       
            });
        },
        complete(id){
        this.$confirm('是否完成订单', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(() => {
            complete(id).then((res)=>{
                console.log(res)
                this.$message({
                type: 'success',
                message: '完成订单'
                });
                this.getMiniProgramsOrders()
            }).catch((err)=>{
                this.$message({
                type: 'info',
                message: err
                });   
            })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作'
            });       
            });
        },
        confirm(id){
        this.$confirm('是否接单', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(() => {
            const config = {
                id : id,
                status : 3
            }
            confirm(config).then((res)=>{
                console.log(res)
                this.$message({
                type: 'success',
                message: '完成接单'
                });
                this.getMiniProgramsOrders()
            }).catch((err)=>{
                this.$message({
                type: 'info',
                message: err
                });   
            })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作'
            });       
            });
        },
        delivery(id){
        this.$confirm('是否派送订单', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(() => {
            delivery(id).then((res)=>{
                console.log(res)
                this.$message({
                type: 'success',
                message: '派送订单'
                });
                this.getMiniProgramsOrders()
            }).catch((err)=>{
                this.$message({
                type: 'info',
                message: err
                });   
            })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作'
            });       
            });
        },
        refund(id){
        this.$prompt('请输入退款理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
            this.rejectionReason = value
            let reson = {
                id: id,
                rejectionReason : value
            }
            refund(reson).then((res)=>{
                console.log(res)
                this.$message({
                type: 'success',
                message: '退款成功'
                });
                this.init()
            }).catch((err)=>{
                this.$message({
                type: 'info',
                message: err
                });   
            })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消退款'
            });       
            });
    }
}
}
</script>

<style  scoped>
.disabled-text {
color: #bac0cd !important;
}
.tableBar{
line-height: 40px;
height: 70px;
display: flex;
justify-content: space-between;
}

.tableBox{
height: 346px;
border-radius: 5px;

}
.add{
height: 40px;
margin-right: 15px;
}

.pageList{
line-height: 40px;
margin-top: 15px;
}

.container{
/* height: 88vh; */

}

.serch{
display: flex;
height:  70px;
justify-content: space-around;
width: 50%;
}

.titleInfo{
    font-weight: bold;
}

.title{
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.button{
    align-self: end;
    color: #9e9e9e;
    font-weight: 500;
}
</style>